<template>
  <div class="exchange txtcolor flex w100 h100">
    <div class="box partBg radius4 flex1">
      <div class="toptitle ratop flex">
        <p>盘口</p>
      </div>
      <div class="flex1 flex column rabom">
        <div class="txttitle txtgray flex ft12">
          <span>方向</span>
          <span>价格({{tradeData.legal_name}})</span>
          <span>数量({{tradeData.currency_name}})</span>
        </div>
        <div class="databox ft12 flex column">
          <ul class="flex1 lit0 overhide flex column end">
            <li
              class="flex tc"
              v-for="(item,index) in sellList"
              v-if="index<20"
              @click="getPrice(item[0])"
            >
              <span class="red">卖{{sellList.length-index}}</span>
              <span>{{item[0] | Fixed4}}</span>
              <span>{{item[1] | Fixed4}}</span>
            </li>
          </ul>
          <p class="green ft18">
            {{nowPrice | Fixed2}}
            <span class="ft12 ml10 txtgray">≈ {{nowPrice * rate | Fixed2}} CNY</span>
          </p>
          <ul class="flex1 overhide">
            <li
              class="flex tc"
              v-for="(item,index) in buyList"
              v-if="index<20"
              @click="getPrice(item[0])"
            >
              <span class="green">买{{index+1}}</span>
              <span>{{item[0] | Fixed4}}</span>
              <span>{{item[1] | Fixed4}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="box partBg radius4 flex1 flex column">
      <div class="toptitle ratop">
        <p>实时成交</p>
      </div>
      <div class="rabom">
        <div class="txttitle txtgray flex ft12">
          <span>时间</span>
          <span>价格({{tradeData.legal_name}})</span>
          <span>数量({{tradeData.currency_name}})</span>
        </div>
        <div class="databox ft12 scroll overauto">
          <ul class="lit0">
            <li class="flex tc" v-for="(item,index) in comList">
              <span>{{item.time | cutDate}}</span>
              <span :class="['green',{'red':item.way==2}]">{{item.price | Fixed2}}</span>
              <span>{{item.number | Fixed4}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "exchange",
  data() {
    return {
      sellList: [],
      buyList: [],
      comList: []
    };
  },
  filters: {
    cutDate(val){
      return val.substr(-8)
    }
  },
  computed: {
    ...mapState({
      tradeData: state => state.tradeData,
      nowPrice: state => state.nowPrice,
      rate: state => state.rate
    }),
    store() {
      return this.$store.state.tradeData;
    }
  },
  watch: {
    store() {
    //   console.log(this.store);
      this.getDeal();
    }
  },
  mounted() {
    let that = this;
    that.connect();
  },
  methods: {
    getPrice(price) {
      eventBus.$emit("changePrice", price);
    },
    getDeal() {
      let that = this;
      that.axios
        .post("/api/transaction/deal", {
          legal_id: that.store.legal_id,
          currency_id: that.store.currency_id
        })
        .then(res => {
          if (res.data.type == "ok") {
            var data = res.data.message;
            var balance = {
                // user_legal:data.user_legal,
                // user_currency:data.user_currency,
                user_legal:5000,
                user_currency:1000,
                last_price:data.last_price
            }
            eventBus.$emit("userBalance", balance);
            var arr1 = [];
            var arr2 = [];
            var arr3 = [];
            var arr4 = [];
            for(var i in data.in){
              arr1=[];
              arr1[0] = data.in[i].price;
              arr1[1] = data.in[i].number;
              arr2.push(arr1)
            }
            for(var i in data.out){
              arr3=[];
              arr3[0] = data.out[i].price;
              arr3[1] = data.out[i].number;
              arr4.push(arr3)
            }
            that.buyList = arr2;
            that.sellList = arr4;
            that.comList = data.complete;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    connect() {
      //封装推送数据
      let that = this;
      that.$socket.emit("login", this.$makeSocketId());
      that.$socket.on("market_depth", msg => {
        if (msg.type == "market_depth") {
          if (
            msg.legal_id == that.store.legal_id &&
            msg.currency_id == that.store.currency_id
          ) {
            // console.log(that.store.legal_id,that.store.currency_id)
            that.buyList = msg.bids;
            that.sellList = msg.asks;
          }
        }
      });
      that.$socket.on("match_trade",msg => {
          if(msg.type == "match_trade"){
              if (
                msg.legal_id == that.store.legal_id &&
                msg.currency_id == that.store.currency_id
            ){
                var time = that.$utils.timestampToTime(msg.data[0].ts.toString().substr(0,10))
                var res = msg.data[0];
                let way = res.direction=='buy' ? 1 :2;
                var data = {
                    price:res.price,
                    time:time,
                    number:res.amount,
                    way:way
                }
                that.comList.unshift(data)
                if(that.comList.length>30){
                    that.comList.pop();
                }
            }
          }
      })
    }
  }
};
</script>
<style lang='scss' scoped>
.exchange {
  .box {
    height: 100%;
    overflow: hidden;
    margin-right: 4px;
  }
  .txttitle {
    height: 30px;
    line-height: 30px;
    padding: 0 4px;
    span {
      flex: 1;
      text-align: center;
    }
  }
  .rabom {
    height: calc(100% - 40px);
  }
  .databox {
    height: calc(100% - 30px);
    li {
      padding: 2px 0;
      cursor: pointer;
      span {
        flex: 1;
      }
    }
    li:hover {
      background: #262a42;
    }
    p {
      height: 40px;
      line-height: 40px;
      padding: 0 40px;
      border-top: 1px solid #2e3753;
      border-bottom: 1px solid #2e3753;
    }
  }
}
</style>